<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /* 
            获取元素节点
            －通过document对象调用
            1.getElementById()
            通过id属性获取一个元素节点对象
            2.getElementsByTagName()
            通过标签名获取一组元素节点对象
            3.getElementsByName()
            通过name属性获取一组元素节点的对象
        */

        window.onload=function(){
            //为id为btn01的按钮绑定一个单击响应函数
            var btn01=document.getElementById("btn01");
            btn01.onclick=function(){
                //查找北京节点
                var bj=document.getElementById("bj");
                //打印bj
                //innerHTML通过这个舒总剋获取大宋元素内部的html代码
                alert(bj.innerHTML);
            };

            //为id为btn02的按钮绑定一个单击响应函数
            var btn02=document.getElementById("btn02");
            btn02.onclick=function (){
                //查找所有li节点
                //getElementsByName()可以根据标签名来获取一组元素节点对象
                //这个方法会给我们返回一个类数组对象，所以查询到的元素都会封装到对象中
                var lis=document.getElementsByTagName("li");
                //打印lis
                alert(lis.length);
                //bianlilis
                for(var i=0;i<lis.length;i++){
                    alert(lis[i].innerHTML);
                };

            };

            //为id为btn03的按钮绑定一个单击响应函数
            var btn03=document.getElementById("btn03");
            btn03.onclick=function(){
                var inputs=document.getElementsByName("gender");
                // alert(inputs.length);
                for(var i=0;i<inputs.length;i++){
                    /* 
                        innerHtml用于获取元素内部的HTML代码
                        对于自结束标签，这个属性没有意义

                    */
                //    alert(inputs[i].innerHTML);
                   /* 
                    如果需要读取元素节点属性，
                    直接使用元素.属性名
                    例子：元素.id  元素.name    元素.value
                    注意：class属性不能采用这种方式
                    读取class属性需要使用元素.className
                   */
                  alert(inputs[i].className);
                };
            };


        }

    </script>
</head>
<body>
   <div id="total">
       <div class="inner">
           <button id="btn01">点一下btn01</button>
           <button id="btn02">点一下btn02</button>
           <p>你喜欢哪个城市？</p>
           <ul id="city">
               <li id="bj">北京</li>
               <li>上海</li>
               <li>武汉</li>
               <li>丹东</li>
               <li>深圳</li>
           </ul>
       </div>

       <div class="inner">
        <button id="btn03">点一下btn03</button>
           gender:
           <input   class="hello"  type="radio" name="gender" value="male">
           Male
           <input class="hello" type="radio" name="gender" value="female">
           Female
           <br>
           <br>
           name:
           <input class="hello" type="text"   name="name"  id="username"  value="=abcde">
       </div>
   </div>
</body>
</html>